<template>
<div class="table">
  <div class="contain">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="车位大小">
        <el-select v-model="stall_size" placeholder="stall_size">
          <!-- <el-option label="空" value="大"></el-option> -->
          <el-option label="大" value="大"></el-option>
          <el-option label="中" value="中"></el-option>
          <el-option label="小" value="小"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车位编号">
        <el-input v-model="stall_code" placeholder="stall_code"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="zt_select_Stall">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table 
      :row-class-name="tableRowClassName"
      :data="pageInfo.list"
      border
      align="center"
      ref="multipleTable"
      tooltip-effect="dark"
      style="
        border-radius: 10px;
        width: 58%;
        margin: 0px auto;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      ">
      <el-table-column type="selection" width="55%" prop="id"> </el-table-column>
      <el-table-column label="车位展示" width="150%" align="center" >
        <template slot-scope="scope">
          <el-popover placement="top-start" title="" trigger="hover">
            <el-image style="width: 450px" :src="scope.row.photo"></el-image>
            <el-image slot="reference"  style="width:120px; height:80px;" :src="scope.row.photo"></el-image>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="stall_size"
        label="车位大小"
        width="80%"></el-table-column>
      <el-table-column prop="stall_code" label="车位编号" width="100%">
      </el-table-column>
      <el-table-column prop="stall_state" label="车位状态" width="120%">
      </el-table-column>
      <el-table-column prop="stall_price" label="车位价格" width="100%">
      </el-table-column>
      <el-table-column prop="evaluate" label="车主备注" width="120%">
      </el-table-column>
      <el-table-column label="操作" width="120%">
        <template slot-scope="scope">
          <el-button type="primary" round @click="stall_rent(scope.row)">租用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="选择您的车辆"   :visible.sync="dialogFormVisible">
      <el-form >
        <el-form-item label="车辆选择" style="margin-left:250px" >
          <el-select v-model="vehicle_id"  placeholder="请选择要存放的车辆" style="float:left">
            <el-option v-for="item of vehicle" 
            :key="item.vehicle_id"  
            :label="item.vehicle_code" :value="item.vehicle_id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"  @click="zt_UpdateStallAndOrder">确 定</el-button>
      </div>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[3, 5, 10, 15, 20]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
    </div>
  </div>
</template>

<style>
  .table {
    /* border: 1px solid white; */
    height:100%;
    background-repeat: no-repeat;
    background-image: url("../../assets/stall_bg.jpg");
    background-size: 100% 100%;
  }
  .contain{
     background-color: rgba(255, 255, 255, 0.7);
      height: 100%;
  }
  .el-table .big-row {
    background: rgba(168, 236, 162, 0.5);
  }
  .el-table .small-row {
    background: rgb(236, 216, 227,0.5);
  }
  .el-table .middle-row {
    background: rgb(156, 232, 235,0.5);
  }

  /* .el-table--enable-row-hover .el-table_body tr:hover {
    background: #fff9ac;
    border: 1px solid #fffd99;
} */
.el-table tbody tr:hover > td {
background-color: rgba(207, 161, 90, 0.5) !important;
}

.el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}

/* .el-table tbody tr:hover>td {
  background-color: #367f7f78 !important
}

.el-table__row--striped td {
  background-color: #45797b33 !important
} */
/* .el-table__row:not(.el-table__row--striped) {
  background: #1439391c !important;
} */
.el-table thead {
  color: rgba(252, 149, 65, 0.8);
  font-weight: 500;
}

el-table th
/*.el-table tr,
.el-table td*/ {
  background-color: transparent !important;
}

.el-table::before {/*去除底部白线*/
	 left: 0;
	 bottom: 0;
	 width: 100%;
	 height: 0px;
}
</style>

<script>
export default {
  inject:['reload'],
  data() {
    return {
      pageInfo: {},
      pageSize: 5,
      currentPage: 1,
      stall_size: "",
      stall_code: "",
      stall_id: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      vehicle_id:'',
      vehicle:[],
      order1:{
        order_user_id:'',
        order_stall_id:'',
        order_vehicle_id:''
      }
    };
  },
  methods: {
    zt_select_Stall() {
      this.$axios
        .get("/zt_selStallAll", {
          params: {
            pageSize: this.pageSize,
            currentPage: this.currentPage,
            stall_size: this.stall_size,
            stall_code: this.stall_code,
          },
        })
        .then((res) => {
          this.pageInfo = res.data.data;
          this.stall_code = null;
          this.stall_size = null;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.zt_select_Stall();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.zt_select_Stall();
      console.log(`当前页: ${val}`);
    },
    tableRowClassName({row, rowIndex}) {
        if (row.stall_size === "大") {
          return 'big-row';
        } else if (row.stall_size === "中") {
          return 'middle-row';
        }else if(row.stall_size === "小"){
          return 'small-row';
        }
      },
    stall_rent(item) {
      this.stall_id = item.stall_id;
      this.$axios
        .get("/zt_selStallById/" + this.stall_id)
        .then((res) => {
          var message = res.data.data.stall_state;
          if (message != "出租中") {
            this.dialogFormVisible = true;
            this.zt_selVehicle();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    stall_alert() {
      this.$alert("租用成功!", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$router.push("/hhh")
        },
      });
    },
    zt_selVehicle() {
       var id = sessionStorage.getItem('userId');
      this.$axios
        .get("/zt_selVehicle/"+id)
        .then((res) => {
          this.vehicle = res.data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    zt_UpdateStallAndOrder(){
       var id = sessionStorage.getItem('userId');
      this.order1.order_user_id = id;
      this.order1.order_stall_id = this.stall_id;
      this.order1.order_vehicle_id = this.vehicle_id;
      this.$axios
        .put("/zt_UpdateStallAndOrder",this.order1)
        .then((res) => {
          this.dialogFormVisible = false;
          this.zt_select_Stall();
          this.stall_alert();
        })
        .catch((error) => {
          console.log(error);
        });
    }
  },
  mounted() {
    this.zt_select_Stall();
  },
};
</script>